import React, {Component} from "react"
import "./style.css"

class Evaluate extends Component{
    constructor(props){
        super(props)
        this.state = {
            id:false,
            shop:"",
            picture:"",
            product:"",
            price:"",
            editing:false,
            comment:"",
            stars:"",
        }
    }
    render(){
        const {shop, product, price, picture} = this.state;
        return(
            <div className="OrderItem">
                <div className="orderItem_picContainer">
                    <img className="orderItem_pic" src={picture} alt=""/>
                </div>
                <div className="orderItem_content">
                    <div className="orderItem_product">{product}</div>
                    <div className="orderItem_shop">{shop}</div>
                    <div className="orderItem_detail">
                        <div className="orderItem_price">{price}</div>
                    </div>
                </div>
                {this.state.editing ? this.renderEditArea() : null}
            </div>
            
        )
    }

    //评价框
    renderEditArea(){
        return (
            <div className="orderItem_commentContainer">
                <textarea onChange={this.handleCommentChange} value={this.state.comment} className="orderItem_comment"/>
                {this.renderStars()}
                <button className="orderItem_btn orderItem_btn_red" onClick={this.handleSubmitComment}>提交</button>
                <button className="orderItem_btn orderItem_btn_grey" onClick={this.handleCancelComment}>取消</button>
            </div>
        )

    }
    //评价框 end


    // 五角星打分
    renderStars() {
        const {stars} = this.state;
        return (
            <div>
                {
                    [1, 2, 3, 4, 5].map((item, index) => {
                        const lightClass = stars >= item ?
                            'orderItem_star_linght' : '';
                        return (
                            <span className={"orderItem_star  "+ lightClass} key={index} onClick={this.handleClickStars.bind(this,item)}>★</span>
                        )
                    })
                }
            </div>
        )
    }
    // 五角星打分 end


     //是否出现评价框
     handleOpenEidt =()=>{
        this.setState({
            editing :true
        })
    }


     //让输入框受控
     handleCommentChange =(e)=>{
        this.setState({
            comment:e.target.value
        })
    }

    //点亮五角星
    handleClickStars =(stars)=>{
        this.setState({
            stars:stars
        })
    }

    //取消按钮
    handleCancelComment=()=>{
        this.setState({
            editing:false,
            stars: this.state.stars || 0,
            comment:this.state.comment || ''
        })
    }
    //提交按钮
    handleSubmitComment=()=>{
        const {id} =this.state.id;
        const {comment,stars} = this.state;
        this.setState({
            editing:false,
        })
    }


    componentDidMount(){
        const id = this.props.match.params.id
        const _this = this
        if(id){
            fetch("/ShopData.json").then((res)=>{
                if(res.ok){
                    res.json().then((data)=>{
                        let item = data.find((item)=>{
                            return item.id == id
                        })
                        if(!item){
                            _this.props.history.goBack()
                            return
                        }
                        _this.setState({
                            id:item.id,
                            shop:item.shop,
                            picture:item.picture,
                            product:item.product,
                            price:item.price,
                            editing:item.ifCommented ? false : true,
                        })
                    })
                }
            }).catch((err)=>{})
        }else{
            this.props.history.goBack()
        }
    }
    componentWillReceiveProps(){

    }
}
export default Evaluate